<html>
  <head>
    <script type="text/javascript" src="../colorpicker.js"></script>
    <style type="text/css">

        #picker-wrapper {
            width: 200px;
            height: 200px;
            position: relative;
        }
        #slider-wrapper {
            width: 30px;
            height: 200px;
            position: relative;
        }
        #picker-indicator {
            width: 3px;
            height: 3px;
            position: absolute;
            border: 1px solid white;
        }
        #slider-indicator {
            width: 100%;
            height: 10px;
            position: absolute;
            border: 1px solid black;
        }
    </style>
  </head>
  <body>

      <div id="picker-wrapper">
          <div id="picker"></div>
          <div id="picker-indicator"></div>
      </div>
      <div id="slider-wrapper">
          <div id="slider"></div>
          <div id="slider-indicator"></div>
      </div>

      <script type="text/javascript">

        ColorPicker.fixIndicators(
                document.getElementById('slider-indicator'),
                document.getElementById('picker-indicator'));

        ColorPicker(
                document.getElementById('slider'), 
                document.getElementById('picker'), 

                function(hex, hsv, rgb, pickerCoordinate, sliderCoordinate) {

                    ColorPicker.positionIndicators(
                        document.getElementById('slider-indicator'),
                        document.getElementById('picker-indicator'),
                        sliderCoordinate, pickerCoordinate
                    );

                    document.body.style.backgroundColor = hex;
            });

      </script>
  </body>
</html>
